<template>
  <Main>
    <PageHeader text="Favorite" />
    <div class="favorite-list variables-wrapper">
      <div class="favorite-item" v-for="(item, i) in favoriteList" :key="i" @click="gotoBookDetail(item)">
        <div class="favorite-cover">
          <img :src="item.avatar" alt="" class="cover-img">
        </div>
        <div class="favorite-info primary-color">
          <p class="book-name">{{ item.name || 'Unknown' }}</p>
          <p class="book-author help-color">Writer: {{ item.author || 'Unknown' }}</p>
          <p class="book-record help-color">
            <!-- <span>Chapter 36</span> -->
            <!-- <span>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;</span> -->
            <!-- <span class="book-split">|</span> -->
            <span>{{ item.updatetime | timeText }}</span>
          </p>
        </div>
      </div>
    </div>
    <van-empty v-if="!favoriteList || favoriteList.length === 0" description="No favorite data now" />
  </Main>
</template>

<script>
import Main from '@/views/layouts/index.vue'
import PageHeader from '@/components/page-header.vue'
import { getFavoriteList } from '@/utils/favorite'
import { timeText } from '@/utils/time-text'

export default {
  components: {
    Main,
    PageHeader
  },

  filters: {
    timeText(val) {
      return timeText(val)
    }
  },

  data() {
    return {
      favoriteList: []
    }
  },

  created() {
    console.log(getFavoriteList())
    this.favoriteList = getFavoriteList() || []
    console.log(this.favoriteList)
  },

  methods: {
    gotoBookDetail(item) {
      const { id } = item
      this.$router.push({
        name: 'Book',
        query: {
          id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.favorite-list {
  padding: 6px 10px;

  .favorite-item {
    display: flex;
    margin-bottom: 10px;
    justify-content: space-between;

    .favorite-cover {
      display: flex;
      align-items: center;
      width: 100px;
      height: 120px;
      border-radius: 4px;
      background-color: #f2f2f2;

      .cover-img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
        overflow: hidden;
      }
    }

    .favorite-info {
      flex: 1;
      margin-left: 20px;
      line-height: 2;
      font-size: 13px;
      // color: #888;

      .book-name {
        font-size: 15px;
      }

      .book-record {
        .book-split {
          margin: 0 10px;
        }
      }
    }
  }
}
</style>
